<template>
	<view class="pageCnt">
		<!-- 教师详情 -->
		<ttBar leftIcon="icon-back" title="名师详情" ></ttBar>
		<!-- 信息卡片 -->
		<teacherCard :teacherInfo="teacherInfo"></teacherCard>
		<!-- 资质与证书 -->
		<view class="certificateBox">
			<view class="certificateItem" @tap="toPage" data-url="certificate" data-type="3" :data-id="teacherInfo.id">
				<image src="../../static/tc1.png"></image>
				<text>资质证书</text>
			</view>
			<view class="certificateItem" @tap="toPage" data-url="certificate" data-type="4" :data-id="teacherInfo.id">
				<image src="../../static/tc2.png"></image>
				<text>荣誉证书</text>
			</view>
			<view class="certificateItem" @tap="toPage" data-url="certificate" data-type="6" :data-id="teacherInfo.id">
				<image src="../../static/tc3.png"></image>
				<text>技能证书</text>
			</view>
			<text class="iconfont icon-right"></text>
		</view>
		<!-- 格言与简介 -->
		<view class="mottoAndIntroduction">
			<view class="mottoBox">
				<text class="title">教育格言</text>
				<text class="text">{{teacherInfo.motto}}</text>
			</view>
			<view class="line"></view>
			<view class="introductionBox">
				<text class="title">教师简介</text>
				<text class="text">{{teacherInfo.desc}}</text>
			</view>
		</view>
		<!-- 所属店铺卡片 -->
		<view class="shopBox">
			<shop-card :shopInfo="shopInfo"></shop-card>
		</view>
		<!-- 主要授课 -->
		<view class="teachClassCnt">
			<text class="title">主要授课</text>
			<view class="goodList">
				<tcGoodList :goodList="teacherInfo.courseList" :shopInfo="shopInfo"></tcGoodList>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import ttBar from "@/components/ttBar/ttBar.vue";
	import teacherCard from "@/components/teacherCard/teacherCard.vue";
	import shopCard from "@/components/shopCard/shopCard.vue";
	import tcGoodList from "@/components/tcGoodList/tcGoodList.vue";
	export default {
		components: {
			ttBar,
			teacherCard,
			shopCard,
			tcGoodList
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		
		},
		data() {
			return {
				teacherInfo: {},
				shopInfo: {},
				id:0,
				sid:0
			};
		},
		methods: {
			getData() {
				this.$store.dispatch("apiGetTeacherDt", {
					id: this.id
				}).then(res => {
					this.teacherInfo = res.data.data
					this.$store.dispatch("apiGetShopDetail",{
						id: res.data.data.storeId,
						userId:this.isLogin?this.userInfo.userId:0
					}).then(shopRes => {
							this.shopInfo = shopRes.data.data
						})
				})
				
			}
		},
		onLoad(cfm) {
			this.id=cfm.id;
			this.getData()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less" >
	page {
		background-color: #f4f4f4;
	}

	.pageCnt {
		display: flex;
		flex-direction: column;
	}

	.certificateBox {
		background-color: #FFFFFF;
		border-bottom: 14upx solid #f4f4f4;
		display: flex;
		align-items: center;
		padding: 20upx;

		.certificateItem {
			width: 32%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 60upx;
				height: 60upx;
			}

			text {
				margin-top: 16upx;
				font-size: 26rpx;
				color: #f79f21;
			}
		}

		.iconfont {
			color: #b7b7b7;
			font-size: 40upx;
		}
	}

	.mottoAndIntroduction {
		border-bottom: 14upx solid #f4f4f4;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding: 28upx 26upx;

		.mottoBox,
		.introductionBox {
			display: flex;

			.title {
				flex-shrink: 0;
				font-size: 32rpx;
				font-weight: bold;
				color: #202932;
			}

			.text {
				font-size: 28rpx;
				color: #202932;
				padding-left: 20upx;
				padding-top: 36upx;
			}
		}

		.line {
			height: 1px;
			background-color: #efefef;
			margin: 32upx;
		}
	}

	.shopBox {
		border-bottom: 14upx solid #f4f4f4;
	}

	.teachClassCnt {
		display: flex;
		flex-direction: column;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #202932;
			background-color: #FFFFFF;
			padding: 46upx 26upx;
		}
	}
</style>
